<template>
    <div>
        <h1>孙子组件</h1>
        <h2>{{ info }}</h2>
    </div>
</template>

<script lang="ts">
import { defineComponent, inject, Ref } from "vue";

export default defineComponent({
    setup() {
        const info = inject<Ref<string>>("info");
        // console.log(info); //这是TypeScript没有定义数据类型，unknown   。
        // ref对象在setup当中操作，一定是xx.value,在template模板当中直接使用即可，实际上再template模板当中inValue，它相当于setup当中的inValue.valule
        console.log(info); //ref对象
        console.log(info?.value); //Object is possibly 'undefined'  可有可无 
        const num = inject<Ref<number>>("num");
        console.log(num?.value);

        // 传递的是对象类型，通过接口定义数据类型
        interface inObj {
            name: string;
            age: number;
        }
        const obj = inject<inObj>("obj");
        console.log(obj);
        console.log(obj?.name);

        // 总而言之 provide传递给子级组件的值，不建议更改
        return {
            info,
        };
    },
});
</script>

<style scoped>

</style>